﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>福建省食品药品监督管理局后台管理</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrom=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="福建省食品药品监督管理局后台管理" />
    <meta name="keywords" content="后台管理，福建省食品药品监督管理局，福建省食药监督局，福建省市场监督管理局" />
    <meta name="author" content="mmcai" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

    <link href="../assets/css/style.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <script src="js/BsIE/html5shiv.js"></script>
    <script src="js/BsIE/respond.js"></script>
    <![endif]-->

</head>
<body>
    <div class="page-wraper">
        <h3 class="page-title">解释说明</h3>
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="#">首页</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li class="active"> 框架的解释说明</li>
            </ul>
        </div>

        <div class="page-filter">
            <div class="form-inline">

                <div class="form-group form-datetime">
                    <div class="startTime input-time">
                        <input type="text" class="input mini" data-name="startTime" data-mui-datepicker placeholder="开始时间" />
                        <i class="fa fa-calendar"></i>
                    </div>
                    <label class="text-join">到</label>

                    <div class="endTime input-time am-input-group">
                        <input type="text" class="input mini" data-name="endTime" placeholder="结束时间" />
                        <i class="fa fa-calendar"></i>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" class="input mini" data-name="num" placeholder="请输入编号" />
                </div>
                <div class="form-group">
                    <select class="select" data-name="address">
                        <option>请选择</option>
                        <option id="003">福建</option>
                    </select>
                </div>
                <div class="form-group form-checkbox">
                    <label class="checkbox-inline">
                        <input type="checkbox" data-name="check" id="baskball">篮球
                    </label>
                </div>
            </div>
            <div class="btn-bar">
                <button class="btn btn-primary btn-filter" type="submit">搜索</button>
            </div>
        </div>

        <div class="page-table">
            <div class="table-option">

                <div class="pull-left btn-group">
                    <div class="btn mui-dropdown">
                        <input type="checkbox" class="" />
                        <i class="fa fa-angle-down dropdown-toggle"></i>
                        <ul class="dropdown-menu dropdown-left">
                            <li>
                                <a href="javascript:void(0);" title="全选">
                                    全选
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" title="反选">
                                    全选
                                </a>
                            </li>
                        </ul>
                    </div>
                    <input type="button" class="btn btn-del" value="删除" />
                    <input type="button" class="btn" value="操作" />
                    <input type="button" class="btn" value="全选" />
                </div>
                <a href="#" class="pull-right btn btn-default">新增</a>
            </div>

            <table class="table table-check tablemvc" data-src="/assets/js/Model/dataTable.js">
                <thead>
                    <tr>
                        <th class="mui-chk">
                            <input type="checkbox" id="checkAll">
                        </th>
                        <th>姓名</th>
                        <th>邮件地址</th>
                        <th>手机号码</th>
                        <th>所在分组</th>
                        <th>其它</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

        </div>

        <div class="page-pagination">

        </div>

        <div class="load-panel">
            <img src="../assets/imgs/loading.gif" />正在加载数据...
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-title">时间选择代码</div>
            </div>
            <div class="panel-body">
                <pre><code data-language="html">
//过滤的代码格式
表格过滤，根据过滤选项上面的data-name来获取，HTML代码如下：
<div class="page-filtesr">
    <div class="form-inline">
        <div class="form-group form-datetime">
            <div class="startTime input-time">
                <input type="text" class="input mini" data-name="startTime" data-mui-datepicker placeholder="开始时间" />
                <i class="fa fa-calendar"></i>
            </div>
            <label class="text-join">到</label>
            <div class="endTime input-time am-input-group">
                <input type="text" class="input mini" data-name="endTime" placeholder="结束时间" />
                <i class="fa fa-calendar"></i>
            </div>
        </div>
    <div class="form-group">
        <input type="text" class="input mini" data-name="num" placeholder="请输入编号" />
    </div>
    <div class="form-group">
        <select class="select" data-name="address">
            <option>请选择</option>
            <option id="003">福建</option>
        </select>
    </div>
    <div class="form-group form-checkbox">
        <label class="checkbox-inline">
            <input type="checkbox" data-name="check" id="baskball">篮球
        </label>
    </div>
    </div>
    <div class="btn-bar">
        <button class="btn btn-primary btn-filter" type="submit">搜索</button>
    </div>
</div>
//请注意上面过滤条件上面的data-name属性，data-name属性值，需要后台传递过来
//前台通过获取data-name属性值和包涵该属性的表单标签的值组成一个键值对，例如
//上面的过滤条件可以得到如下键值对：
{
    startTime:"开始时间",
    endTime:"结束时间",
    num:"编号",
    address:"地址下拉框的值",
    check:"复选框的值"
}
如果值存在就传递值，不存在就不传递任何值，没有任何条件的时候，点击搜索，没有任何反应

过滤按钮必须添加class="btn-filter"类名

            </code></pre>
            </div>
        </div>

    </div>

    <!--JS 代码-->
    <script src="../assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="../assets/js/plugins/jquery.mui.js"></script>
    <script src="../assets/js/plugins/mui.datepicker.js"></script>
    <script src="../assets/js/plugins/handlebars-v1.3.0.js"></script>
    <script type="text/x-handlebars-template" id="table-template">
        {{#each data}}
        <tr>
            <td>
                <input type="checkbox" class="checkbox">
            </td>
            <td>{{name}}</td>
            <td><a href="http://www.baidu.com/" target="_self">{{email}}</a></td>
            <td>{{tel}}</td>
            <td>{{group}}</td>
            <td>
                <div class="mui-link-group">
                    <a href="form-base.html" class="mui-link mui-edit" title="修改">
                        <i class="fa fa-pencil"></i>
                    </a>
                    <a href="javascript:void(0);" class="mui-link mui-del" title="删除">
                        <i class="fa fa-trash-o"></i>
                    </a>
                </div>
            </td>
        </tr>
        {{/each}}
    </script>
    <script src="../../assets/js/plugins/rainbow-custom.min.js"></script>
</body>
</html>
